<template>
  <div class="contain">
    <div class="homePage" @click="hangleToHome">
      <h1>德客</h1>
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      style="color: #fff;"
      :default-active="navselected"
      unique-opened
      :active="navselected"
      @select="selectItems"
    >
      <!-- 一级菜单 -->
      <el-submenu
        :index="`${index+1}`"
        v-for="(item, index) in sidebar"
        :key="index"
        :style="{display: pageShow ? '' : item.quanxian}"
      >
        <template slot="title">
          <router-link
            :to="item.children.length == '0' ? item.page_path : '##'"
            :class="item.children.length == '0' ? 'dandude' : ''"
            style="color: #868a8d"
          >
            <i
              :class="item.icon"
              style="color: #868a8d;margin-right: 10px"
              :style="{fontSize: isCollapse ? '24px' : '16px'}"
            ></i>
            <span>{{item.page_name}}</span>
          </router-link>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item
          v-for="(subItem, subIndex) in item.children"
          :key="subIndex"
          :index="`${index+1}-${subIndex+1}`"
          style="text-indent: 20px"
          :style="{display: pageShow ? '' : subItem.quanxian}"
          :class="{active:`${index+1}-${subIndex+1}`==isActive}"
        >
          <router-link
            :to="item.page_path + '/' + subItem.page_path"
            style="color: #868a8d;font-weight: 100;display: block;height: auto"
          >{{subItem.page_name}}</router-link>
        </el-menu-item>
      </el-submenu>
      <a class="handware" href="http://bbs.decerp.cn/" target="_blank">
        <i class="iconbaike" :style="{fontSize: isCollapse ? '24px' : '16px'}"></i>
        <span :style="{display: isCollapse ? 'none' : 'block'}">德客百科</span>
      </a>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex"; //注册state
export default {
  data() {
    return {
      // 是否激活首页
      isClick: true,
      // 侧边栏
      sidebar: [],
      isActive: ["1-1"],
      navselected: "/",
      // 权限
      pageShow: true,
      menuData: [],
      // 权限页面
      role_config: ""
    };
  },
  // 接收从父组件中传进来的数据
  props: {
    isCollapse: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    // 引入权限页面
    ...mapState(["userId"]),
    ...mapState(["slideData"]),
    ...mapState(["usertype"])
  },
  methods: {
    // 跳转到首页
    hangleToHome() {
      this.$router.push("/admin");
    },
    getNavType() {
      this.navselected = this.$store.state.adminleftnavnum;
      //store.state.adminleftnavnum里值变化的时候，设置navselected
    },
    // 选中当前项激活菜单
    selectItems(index) {
      this.isActive = index;
      this.$store.state.adminleftnavnum = index;
      //按钮选中之后设置当前的index为store里的值。
    },
    handleToHandwareShop() {
      this.$router.push("/admin/index/hardwareShop");
    }
  },
  created() {
    // 验证权限
    // const jurisdiction = sessionStorage.getItem("jurisdiction");
    this.role_config = sessionStorage.getItem("role_config");
    // console.log(this.userId);
    if (this.userId != 1) {
      // console.log(this.userId);
      // 隐藏权限不足页面
      this.pageShow = false;
    }
  },
  mounted() {
    this.menuData = JSON.parse(sessionStorage.getItem("role_config"));
    this.isClick = this.$route.mate;
    if (this.usertype == 1) {
      this.sidebar = this.menuData;
    } else {
      this.sidebar = this.slideData;
    }
  },
  watch: {
    // 监测store.state
    "$store.state.adminleftnavnum": "getNavType"
  }
};
</script>

<style lang="less">
.contain {
  position: relative;
  overflow-x: hidden;
  background-color: rgb(0, 21, 41);
  .homePage {
    width: 100%;
    line-height: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #f2f2f2;
    cursor: pointer;
    h1 {
      font-size: 0;
      background: url("../assets/logo.png") no-repeat;
      background-size: contain;
      background-position: bottom;
    }
  }
  .handware {
    color: #0094ff;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    i {
      margin-right: 15px;
    }
  }
}
/* 这个是自带的样式 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
}
.el-menu {
  border-right-width: 0px;
  background-color: inherit;
  width: auto;
}
.el-submenu__title {
  font-weight: 100;
}
// 修改默认的
// 一级菜单的每一项
.el-submenu__title {
  font-size: 16px;
  padding: 0 !important;
  .dandude + i {
    display: none;
  }
}
.el-submenu__title:focus,
.el-submenu__title:hover,
.el-submenu__title:active {
  background-color: rgb(0, 21, 41);
}
.el-submenu__title:hover {
  a,
  i {
    color: #fff !important;
  }
}
// 二级菜单的每一项
.el-menu-item:focus,
.el-menu-item:hover,
.el-menu-item:active {
  background-color: rgb(27, 33, 43);
}
.el-menu-item:hover {
  a {
    color: #fff !important;
  }
}
.el-menu-item {
  background-color: rgb(27, 33, 43);
  font-size: 16px;
  &.active {
    a {
      color: #fff !important;
    }
  }
}
</style>